<template>
  <el-form :inline="true" :model="formData" class="demo-form-inline">
    <el-form-item label="场所">
      <el-select v-model="formData.venueIds" multiple placeholder="请选择场所" style="width: 240px">
        <el-option v-for="item in options" :key="item.id" :label="item.name" :value="item.id"/>
      </el-select>
    </el-form-item>
    <el-form-item>
      <el-date-picker style="width: 210px" v-model="formData.dateRange" type="daterange" range-separator="至"
                      start-placeholder="开始日期" end-placeholder="结束日期" value-format="YYYY-MM-DD"/>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="onSubmit">查询</el-button>
    </el-form-item>
  </el-form>
  <div id="myChart" :style="{height:'300px'}"></div>
</template>

<script setup lang="ts">
import {onMounted, reactive, ref} from "vue";
import * as echarts from 'echarts'
import {trackApi, venueApi} from "@/api";
import * as dayjs from "dayjs";

onMounted(() => {
  callVenueApi()
  callTrackApi()
})
const options = ref([])
const callVenueApi = () => {
  venueApi.select.call().then((res: any) => {
    options.value = res.list
  })
}
const callTrackApi = () => {
  let params = {}
  if (formData.venueIds.length != 0) {
    params.venueIds = formData.venueIds
  }
  params.startDate = formData.dateRange[0]
  params.endDate = formData.dateRange[1] + " 23:59:59"
  trackApi.select.call(params).then((res: any) => {
    initChart(res)
  })
}
const initChart = (res: any) => {
  let day = new Set(res.map((item: any) => item.day))
  let names = new Set(res.map((item: any) => item.name))

  let myChart = echarts.init(document.getElementById("myChart"))
  myChart.clear()
  let option = {
    title: {
      text: '人员流动信息'
    },
    tooltip: {},
    legend: {
      data: [...names]
    },
    xAxis: {
      type: 'category',
      data: [...day]
    },
    yAxis: {},
    series: [{
      name: '',
      data: [],
      type: 'bar'
    }]
  }
  option.series = []
  for (let name of names) {
    option.series.push({
      name: String(name),
      data: res.filter((p: any) => p.name == name).map((item: any) => item.count),
      type: 'bar'
    })
  }

  myChart.setOption(option)
  window.onresize = () => {
    //自适应大小
    myChart.resize()
  }
}

const formData = reactive({
  venueIds: [],
  //TODO
  dateRange: [dayjs().add(-7, 'day').format('YYYY-MM-DD'), dayjs().format('YYYY-MM-DD')]
})

const onSubmit = () => {
  callTrackApi()
}
</script>

<style scoped>

</style>
